<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>文章搜索列表</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">
    <link rel="stylesheet" href="../../style/home/search.css">

    <script src="../../libs/vue.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <!--<script src="js/system.js"></script>-->
    <style>
        .nav-ri .search-box .search-input .input-position{
            display: flex;
        }
    </style>
</head>
<body>
<!--<header></header>-->
<!--<nav></nav>-->

<div id="app" v-cloak>
	<header-component></header-component>
	<navinner-component></navinner-component>

	<!-- 主站导航 -->
	<navrow-component v-if="sitelevel == ''" :siteid="site_data"></navrow-component>
	<!-- 行政站导航 -->
	<navtab2-component v-if="sitelevel != 5 && sitelevel != '' " :siteid="site_data"></navtab2-component>
	<!-- 基层站导航 -->
	<navtab3-component v-if="sitelevel==5" :siteid="site_data"></navtab3-component>

	<main>
		<div class="content" id="search-article">
			<div class="search-page">
				<div class="search-header">
					<div class="search-tip-l">搜索结果：{{keyWord}}</div>
					<div class="search-tip-r">
						没找到自己的小区怎么办？<a href="../../views/login/login.html">点击注册小区分站</a>
					</div>
				</div>
				<div class="search-list" v-if="siteList.length">
					<div class="search-item" v-for="(item,index) in siteList">
						<div class="search-title">
							<font color="#FE7600">{{item.sitename}}</font>
							&nbsp;
							<a @click="inNowSite(item)">网站【{{ item.area_str.replace(/，/g,'-') }}】</a>
						</div>
<!--						<div class="search-content">-->
<!--							<font color="#FE7600">幸福小区</font>网站是鞍山海城海城<font color="#FE7600">幸福小区</font>-->
<!--							分类信息互动供需平台。为本小区居民提供物业通知、业主论坛、分类信息、租房信息、求助信息、教育信息、商务信息等。-->
<!--						</div>-->
						<div class="search-link">{{item.site_number}}</div>
					</div>
				</div>
				<div class="article-list" v-if="articleList.length">
					<div class="article-list-item" v-for="(item,index) in articleList">
						<a :href="'../site/sitelist.html?id='+item.id+'&category_id='+item.category_id+'&category_name='+decode(item.category_name)+'&type=detail'" style="display: flex">
							<div class="article-item-img" :style="{'background-image':'url(' + item.coverimages_text[0] + ')'}"></div>
							<div class="article-item-content flex-1">
								<div class="article-item-title">{{item.title}}</div>
								<div class="article-item-prop">
									<span>发布于：{{item.resource}}</span>
									<span>{{item.publishtime_text}}</span>
									<span>评论：{{item.comment}}</span>
								</div>
								<div class="article-item-text">{{item.postcontent | textFilter}}</div>
							</div>
						</a>
					</div>
				</div>
				<v-pagination v-if="total" :total="total" :display="limit" :currentPage="page" :pagegroup="pagegroup" v-on:pagechange="togglePage"></v-pagination>
			</div>
		</div>
	</main>
	<footer-component></footer-component>
</div>


<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>

<script>
	var site = JSON.parse(window.localStorage.getItem("station")) || {}

    var search = new Vue({
        el:"#app",
        data    : {
			site_data:site,
            type:"article",             // 列表数据
            siteList:[],                // 站点数据列表
            articleList:[],             // 文章数据列表
            keyWord:"",                 // 搜索关键字
            pagegroup:0,                // 总页码,
            limit:10,                   // 每页显示条数
            total:0,                    // 数据总条数
            page:1,                     // 当前页码

			sitelevel:"",
			site_id:''
        },
        mounted(){
            var _th = this;
            this.type = parameter.type;
            this.keyWord = decodeURIComponent(parameter.keyword);

			if (window.localStorage.getItem('station')){
				this.sitelevel = JSON.parse(window.localStorage.getItem('station')).site_level;
				this.site_id = JSON.parse(window.localStorage.getItem('station')).site_id;
			}

            this.togglePage();
            if (this.type=='site'){
            	this.getSiteList()
			} else{
            	this.getArticleList()
			}
        } ,
        methods : {
			decode(str){
				return encodeURI(encodeURI(str))
			},
        	// 进入当前站点
			inNowSite(data){
				window.localStorage.setItem("station",JSON.stringify(data));

				if(data.site_level == 5){
					window.location.href = '../../views/home/stationC.html';
				}else{
					window.location.href = '../../views/home/stationB.html';
				}
			},
            // 搜索文章
            getArticleList(){
                axios.post(sysurl + 'index/articleList' , {
                    keywords:this.keyWord,
                    limit:this.limit,
                    page : this.page,
					site_id : this.site_id
                }).then(res => {
					console.log(res,'搜索文章');
					var data = res.data;
                    if( data.code === 1 ){
                        this.articleList = data.data.data
                        if( data.data.current_page == 1 && data.data.total ){
                            this.total = data.data.total;
                            this.pagegroup = data.data.last_page;
                        }

                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            // 搜索站点
            getSiteList(){
				let d = transFormData({
					keywords:this.keyWord,
					limit:this.limit,
					page : this.page
				})
                axios.post(sysurl + 'index/siteSearch' ,d ).then(res => {
					console.log(res,'搜索站点');
					var data = res.data;
                    if( data.code === 1 ){
                        this.siteList = data.data.data

                        if( this.page == 1 && this.total > 0 ){
                            this.total = data.data.total;
                            this.pagegroup = data.data.last_page;
                        }

                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            // 切换分页
            togglePage(page){
                this.page = page || this.page;
                if(this.type == 'article'){
                    this.getArticleList();
                }else if(this.type == 'site'){
                    this.getSiteList();
                }
            }
        } ,
		filters:{
			// 过滤中文
			textFilter(txt){
				var str;
				str = txt.match(regHtml,"");
				return str.join("");
			}
		},
    })

</script>
</body>
</html>
